<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<style type="text/css">
		.spinner_loading-outbox{position:fixed;z-index:999999999999;width: 100%;height: 100%;top: 0;left: 0;}
		.spinner_loading-box{height:120px;width:120px;border-radius:5px;box-sizing:border-box;background-color:#666;position:fixed;margin:auto;z-index:999999999999;top:0;left:0;right:0;bottom:0;}
		.spinner_loading-box .text{color:#fff;font-size:12px;text-align:center;position:absolute;bottom:12px;width:100%;}
		.spinner_loading{margin:auto;width:40px;height:40px;top:27px;position:relative;z-index:9999;}
		.loading_container1>div,.loading_container2>div,.loading_container3>div{width:10px;height:10px;background-color:#fff;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
		.spinner_loading .spinner-container{position:absolute;width:100%;height:100%;}
		.loading_container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
		.loading_container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}
		.circle1{top:0;left:0;}
		.circle2{top:0;right:0;}
		.circle3{right:0;bottom:0;}
		.circle4{left:0;bottom:0;}
		.loading_container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
		.loading_container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
		.loading_container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
		.loading_container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
		.loading_container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
		.loading_container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
		.loading_container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
		.loading_container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
		.loading_container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
		.loading_container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
		.loading_container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
		@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}
		40%{-webkit-transform:scale(1.0)}
		}
		@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
		40%{transform:scale(1.0);-webkit-transform:scale(1.0);}
		}
	</style>
	<body>
		<div class="spinner_loading-outbox">
			<div class="spinner_loading-box">
				<div class="spinner_loading">
					<div class="spinner-container loading_container1">
						<div class="circle1"></div>
						<div class="circle2"></div>
						<div class="circle3"></div>
						<div class="circle4"></div>
					</div>
					<div class="spinner-container loading_container2">
						<div class="circle1"></div>
						<div class="circle2"></div>
						<div class="circle3"></div>
						<div class="circle4"></div>
					</div>
					<div class="spinner-container loading_container3">
						<div class="circle1"></div>
						<div class="circle2"></div>
						<div class="circle3"></div>
						<div class="circle4"></div>
					</div>
				</div>
				<div class="text">数据正在加载中</div>
			</div>
		</div>
	</body>
</html>
